<template>
    <div class="container">
        <div v-if="!utils.getIsApp()" class="common-header-wrap">
            <mt-header title="确认订单" class="common-header">
                <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>
        <div class="made-time">
            <div class="made-time-title">{{buyshow.case.name}}</div>
            <div class="made-time-main">
                <div class="made-time-list">出发日期：{{buyshow.start.substring(0,buyshow.start.length-8)}}</div>
                <div v-if="type==2" class="made-time-list">返程日期：{{buyshow.end.substring(0,buyshow.end.length-8)}}</div>
            </div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">出发地</div>
            <div class="address-content">{{buyshow.city.name}}</div>
        </div>
        <div v-if="type==1" class="star-address">
            <div style="font-weight: bold">选择套餐</div>
            <div class="address-content">{{buyshow.case.name}}</div>
        </div>
        <div v-if="type==2" class="star-address">
            <div style="font-weight: bold">选择景区</div>
            <div class="address-content">{{spot(buyshow).toString()}}</div>
        </div>
        <div v-if="type==2" class="star-address">
            <div style="font-weight: bold">选择驿站</div>
            <div class="address-content">{{post(buyshow).toString()}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">出游人群</div>
            <div class="address-content">{{buyshow.people==1?'单人':'团体'}}</div>
        </div>
        <div v-if="type==2" class="star-address">
            <div style="font-weight: bold">选择旅行社</div>
            <div class="address-content">{{buyshow.user.name}}</div>
        </div>
        <div v-if="type==2" class="star-address">
            <div style="font-weight: bold">选择酒店</div>
            <div class="address-content">{{buyshow.hotel.name}}</div>
        </div>
        <div v-if="type==2" class="star-address">
            <div style="font-weight: bold">选择车辆</div>
            <div class="address-content">{{buyshow.cart.name}}</div>
        </div>
        <div v-if="type==2" class="star-address">
            <div style="font-weight: bold">选择餐食</div>
            <div class="address-content">{{buyshow.food.toString()}}</div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">联系人信息</div>
            <div class="submit-information-list">
                <div class="information-title">姓名</div>
                <div class="information-input">{{buyshow.name}}</div>
            </div>
            <div class="submit-information-list">
                <div class="information-title">手机</div>
                <div class="information-input" >{{buyshow.mobile}}</div>
            </div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">备注</div>
            <div class="submit-remarks">
               {{buyshow.remark}}
            </div>
        </div>
        <div style="width: 100vw;height: 40px"></div>
        <div class="teatravel-foot" @click="getTravelbuystep2">获取报价</div>
    </div>
</template>

<script>
    import { mapState, mapMutations} from 'vuex'
    import {getTravelbuystep2} from '../../../api/travel'
    import { Toast, Indicator } from 'mint-ui'
    export default {
        name: 'Teatravelmade',

        data () {
            return {
               type:'' // 套餐类型
            }
        },
        created () {
            this.type=this.$route.query.type
        },
        computed: {
            ...mapState({
                buy: state => state.travel.buy,
                buyshow: state => state.travel.buyshow
            }),
        },
        mounted () {
            if(!this.buyshow){
                this.$router.go(-1)
            }
        },
        methods: {
            ...mapMutations({
                clearbuy: 'clearbuy',
            }),
            //景区显示
            spot(data){
                let res=[];
                for(let i=0;i<data.spot.length;i++){
                    res.push(data.spot[i].name)
                }
                return res
            },
            //驿站显示
            post(data){
                let res=[];
                for(let i=0;i<data.post.length;i++){
                    res.push(data.post[i].name)
                }
                return res
            },
            //获取报价
            getTravelbuystep2(){
                getTravelbuystep2(this.buy).then(res=>{
                    this.clearbuy();
                    this.$router.push({name:'HomeTeaorderlist'})
                }).catch(function (error) {
                    Toast(error.message)
                })
            }

        }
    }
</script>

<style scoped lang="scss">
    .submit-meal {
        margin-top: 10px;
        background: white;
        padding: 10px 25px;

        .submit-meal-title {
            font-size: .7rem;
            font-weight: bold;
        }

        .submit-information-list{
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .information-title{
                font-size: .6rem;
                margin-right: 20px;
            }
            .information-input{
                font-size: .6rem;
                color: #B5B5B5;
            }
        }
        .submit-remarks{
            font-size: .6rem;
            color: #B5B5B5;
            margin-top: 6px;
        }
    }
    .star-address {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 25px;
        font-size: .7rem;
        background: white;
        align-items: center;
        .address-content{
            color:#B5B5B5;
            font-size: .6rem
        }
    }
    .made-time{
        padding: 10px 25px;
        background: white;
        .made-time-title{
            font-size: .8rem;
            font-weight: bold;
        }
        .made-time-main{
            margin-top: 5px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .made-time-list{
                color: $primaryColor;
                font-size:.6rem;
            }
        }
    }
    .teatravel-foot{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        font-size: .9rem;
        font-weight: bold;
        color: white;
        background: $primaryColor;
        text-align: center;
        line-height: 40px;
    }
</style>
